import {
  RouterProvider,
  createBrowserRouter,
  RouteObject,
} from "react-router-dom";
import { lazy } from "react";

const About = lazy(() => import("./pages/About"));
const Protocol = lazy(() => import("./pages/Protocol"));

const Find = lazy(() => import("./pages/Find"));
const Publish = lazy(() => import("./pages/Publish"));
const Notice = lazy(() => import("./pages/Notice"));
const Settlement = lazy(() => import("./pages/Settlement"));
const GoodsDetail = lazy(() => import("./pages/GoodsDetail"));

import UPage, { UBuy, UCollect, UPublish } from "./pages/UPage";
import { RequireAuth } from "./layout/RequireAuth";
import { Root } from "./layout/Root";
import { ConfigProvider, App as AntdApp } from "antd";

const routes: RouteObject[] = [
  {
    path: "/",
    element: <Root />,
    children: [
      {
        index: true,
        element: <Find />,
      },
      {
        path: "publish",
        element: (
          <RequireAuth>
            <Publish />
          </RequireAuth>
        ),
      },
      {
        path: "edit/:gid",
        element: (
          <RequireAuth>
            <Publish />
          </RequireAuth>
        ),
      },
      {
        path: "notice",
        element: (
          <RequireAuth>
            <Notice />
          </RequireAuth>
        ),
      },
      {
        path: "settlement",
        element: (
          <RequireAuth>
            <Settlement />
          </RequireAuth>
        ),
      },
      {
        path: "g/:gid",
        element: <GoodsDetail />,
      },
      {
        path: "u/:account",
        element: <UPage />,
        children: [
          {
            index: true,
            element: <UPublish />,
          },
          { path: "collect", element: <UCollect /> },
          { path: "buy", element: <UBuy /> },
          {
            path: "follow",
            element: <div>follow</div>,
          },
        ],
      },
    ],
  },
  {
    path: "/about",
    element: <About />,
  },
  { path: "/protocol", element: <Protocol /> },
];

export default function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          fontSize: 16,
          colorPrimary: "#222222",
          colorText: "#262626",
          colorTextPlaceholder: "#808080",
          colorBorder: "#d9d9d9",
          borderRadius: 4,
          colorLinkHover: undefined,
        },
      }}
    >
      <AntdApp>
        <RouterProvider router={createBrowserRouter(routes)} />
      </AntdApp>
    </ConfigProvider>
  );
}
